﻿$(function() {
	var singlechart = echarts.init(document.getElementById('singlechart'));
	option = {
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            animation: false
	        }
	    },
	    backgroundColor:'#e0e0e0',
	    toolbox: {
	        show: true,
	        feature: {
	            dataView: {show: true, readOnly: false},
	            magicType: {show: true, type: ['line', 'bar']},
	            restore: {show: true}
	        }
	    },
	    grid: {
            top: '10%',
            left: '3%',
            right: '3%',
            bottom:'15%',
            containLabel: true
        },
	    xAxis: {
	        type: 'category',
	        boundaryGap: false,
	        splitLine:{
				lineStyle:{
					color:'#b6b6b6'
				}	        	
	        },
	        data: []
	    },
	    yAxis: {
	        type: 'value',
	        boundaryGap: [0, '100%'],
	        splitLine:{
				lineStyle:{
					color:'#b6b6b6'
				}	        	
	        }
	    },
	    dataZoom: [{
	        type: 'inside',
	        start: 0,
	        end: 100
	    }, {
	    	type: 'slider',
	        start: 0,
	        end: 100,
	        handleSize:5
	    }],
	    series: [{
            name:'功率值',
            type:'line',
            smooth:true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
                normal: {
                    color: 'rgb(255, 70, 131)'
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(255, 158, 68)'
                    }, {
                        offset: 1,
                        color: 'rgb(255, 70, 131)'
                    }])
                }
            },
            data: []
        }]
	};
    singlechart.setOption(option);
    
    var liquidFill = echarts.init(document.getElementById('liquidFill'));
//    lfOpt = {
////	    backgroundColor: '#0ca59c',
//	    series: [ {
//	        type: 'liquidFill',
//	        data: [0],
//	        color: ['#49d088'],
//	        radius: '80%',
//	        amplitude: 8,
//	        label: {
//	            normal: {
//	                formatter: function() {
//	                    return '功率\n0KW'
//	                },
//	                textStyle: {
//	                    fontSize: 10,
//	                    color: '#44c078'
//	                },
//	                position: ['50%', '30%']
//	            }
//	        },
//	        outline: {
//	            itemStyle: {
//	                borderColor: '#49d088',
//	                borderWidth: 5
//	            },
//	            borderDistance: 0
//	        },
//	        itemStyle: {
//	            normal: {
//	                backgroundColor: '#fff'
//	            }
//	        }
//	    }]
//	};
//	liquidFill.setOption(lfOpt);
	
    var vm = new Vue({
	    el: '#singledata',
	    data:{item:[]},
	    created: function() {
	    	refreshData();
	    },
	    ready:function(){
		    setInterval(function(){
		         refreshData();
			}, 5000);
		},
	    methods: {
            equListSelect: function() {
                refreshData();
            }
        }
	});
    function refreshData(){
    	var arr = $("#equToSel").find("option:selected").val().split('*');
    	var params = {
    		'equId':arr[0],
    		'lineId':arr[1]
    	};
    	$.post(basePath+"/monitor/singlerefresh.json",params,function(res){
    		vm.$set('item',res);
    		if(res.powers.lenght!=0){
  				singlechart.setOption({
			        xAxis: {
			            data: res.times
			        },
			        series: [{
			            data: res.powers
			        }]
		       });
  			}
  			 lfOpt = {
			    series: [ {
			        type: 'liquidFill',
			        data: [0.65],//[(res.currentPower).toFixed(2)],
			        color: ['#49d088'],
			        radius: '80%',
			        amplitude: 8,
			        label: {
			            normal: {
			                formatter: function() {
//			                	return '功率\n'+res.currentPower*100+'KW';
			                    return '功率\n'+res.currentPower+'KW';
			                },
			                textStyle: {
			                    fontSize: 10,
			                    color: '#44c078'
			                },
			                position: ['50%', '30%']
			            }
			        },
			        outline: {
			            itemStyle: {
			                borderColor: '#49d088',
			                borderWidth: 5
			            },
			            borderDistance: 0
			        },
			        itemStyle: {
			            normal: {
			                backgroundColor: '#fff'
			            }
			        }
			    }]
			};
			liquidFill.setOption(lfOpt);
    	});
    }
});